import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import EChart from '@kuiper-components/echarts';

import Empty from '../../../../../../components/empty/EmptyPie';
import NodeInfo from './NodeInfo';
import s from './style.module.css';

const COLOR_MAP = {
	异常: 'rgb(255, 141, 133)',
	正常: 'rgb(64, 158, 255)',
};
const pieOption = {
	color: ['#4CAB73', '#F8BE45'],
	tooltip: {
		trigger: 'item',
		formatter: '{b}:{c} ({d}%)',
	},
	legend: {
		orient: 'horizontal',
		bottom: 10,
		icon: 'circle',
	},
	series: [
		{
			center: ['50%', '50%'],
			name: '状态占比',
			type: 'pie',
			radius: ['45%', '60%'],
			avoidLabelOverlap: false,
			label: {
				normal: { show: false, position: 'center' },
				emphasis: {
					show: true,
					fontSize: 14,
					formatter: '{b}\n{d}%',
				},
			},
			emphasis: {
				label: {
					show: true,
					fontSize: '30',
					fontWeight: 'bold',
				},
			},
			labelLine: {
				show: false,
			},
			itemStyle: {
				borderColor: '#fff',
				borderWidth: 2,
			},
		},
	],
};
function InfoDisplay({ className, chartData, abnormalNodes, respInfo }) {
	let sum = 0;
	pieOption.series[0].data = Object.entries(chartData).map(([name, value]) => {
		sum += value;
		return { name, value, itemStyle: { color: COLOR_MAP[name] } };
	});

	return (
		<div className={cn(className, s.infoDisplay)}>
			{sum > 0 ? (
				<EChart className={s.chart} option={pieOption} />
			) : (
				<div className={s.emptyContainer}>
					<Empty className={s.empty} width={24} />
				</div>
			)}

			<div className={s.info}>
				<div className={s.node}>
					<span className={s.text}>异常监测点</span>
					{abnormalNodes.map(node => (
						<div className={s.tag} key={node}>
							{node}
						</div>
					))}
				</div>
				<div className={s.respTime}>
					<NodeInfo
						className={s.nodeInfo}
						title="平均响应时间"
						num={respInfo?.avg || 0}
						tag=""
					/>
					<NodeInfo
						className={s.nodeInfo}
						title="响应最快"
						num={respInfo?.fast?.totalTime || 0}
						tag={<div className={s.mt10}><span className={s.mr10}>{respInfo?.fast?.area}</span><span>{respInfo?.fast?.networkDisplayName}</span></div>}
						type="fastest"
					/>
					<NodeInfo
						className={s.nodeInfo}
						title="响应最慢"
						num={respInfo?.slowest?.totalTime || 0}
						tag={<div className={s.mt10}><span className={s.mr10}>{respInfo?.slowest?.area}</span><span>{respInfo?.slowest?.networkDisplayName}</span></div>}
						type="slowest"
					/>
				</div>
			</div>
		</div>
	);
}

InfoDisplay.propTypes = {
	className: PropTypes.string,
	chartData: PropTypes.object,
	abnormalNodes: PropTypes.arrayOf(PropTypes.string),
	respInfo: PropTypes.shape({
		fast: PropTypes.object,
		slowest: PropTypes.object,
		avg: PropTypes.number,
	}),
};
InfoDisplay.defaultProps = {
	className: '',
};

export default InfoDisplay;
